import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import './index.less';
function Order(props) {
    const { open } = props;
    return open ? (
        <div style={{
            width:350,
            height: 102,
            backgroundColor: 'rgba(0,0,0,.4)',
           
            marginTop:30,
            marginLeft:0
            
        }}>
           
                <table style={{
                    marginBottom:20,
                    width:350
                }}>
                    <tr >
                        <td style={{
                            color: 'rgb(5, 238, 219)',
                        }}>宜宾市:</td>
                        <td><a href='#!'>翠屏区</a></td>
                        <td><a href='#!'>南溪区</a></td>
                        <td><a href='#!'>宜宾县</a></td>
                        <td><a href='#!'>江安县</a></td>

                    </tr>
                    <tr>
                        <td></td>
                        <td><a href='#!'>长宁县</a></td>
                        <td><a href='#!'>高县</a></td>
                        <td><a href='#!'>筠连县</a></td>
                        <td></td>

                    </tr>
                </table>
           
            <hr style={{
                width: '95%',
                color: '#000',
            }}></hr>
        </div>
    ) : null
}
// handleClick()=>
export default function ShowCity() {
    const [open,setOpen]=useState(false);
    const handleClick=()=>{
        setOpen(true);
       
    }
    const isOpen= ()=>{
        setOpen(false);
    }
    
    return <>
    <div>
        <div className='input' style={{
        width: 350,
        height: 40,
        zIndex:1,
        position:'absolute',
        top:100,
        left:395
      
    }} 
    >
        
        <span onClick={handleClick} style={{
            
            width:'90%',
            height:40,
            display:'inline-flex',
            alignItems:'center',
            paddingLeft:12
        }}>宜宾市</span>
       
        
        <Order open={open} />
        </div>
        <img src={require('./img/down1.png')} alt='' style={{
            position:'relative',
            top:107,
            left:700,
            width: 30,
            height: 30,
            zIndex:2,
        }} 
        onClick={isOpen}/>
    </div>
    </>
}